<template>
  <!-- 用户抗定位 -->
  <div >
    <div style="padding: 10px; ">
      <div class="flex-container">
        <!-- 标签页 -->
        <el-tabs v-model="activeTabName" @tab-click="handleClick" class="tab">
          <el-tab-pane label="全部" name="all"/>
        </el-tabs>
        <!-- 后三个元素靠最左边 -->
        <div class="flex-group-left">

          <!-- 日期选择器和搜索框容器 -->
          <div class="flex-grow">
            <el-date-picker style="margin-right: 10px" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" class="flex-item"/>

            <el-button @click="handleBatchDelete">
              <svg-icon class="search-icon" icon-class="shanchu"/>
              批量删除
            </el-button>
            <el-button  type="primary"  style="background: linear-gradient( 270deg, #2DBFFD 0%, #0E5FFF 100%);" @click="dialogFormVisible = true">
              <svg-icon class="search-icon" icon-class="daoru"/>
              导入
            </el-button>
          </div>

        </div>
      </div>
      <div class="mainTable">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first" />
        </el-tabs>
        <el-table ref="multipleTable" :data="currentTableData" tooltip-effect="dark" style="width: 100%"
          :default-sort="{ prop: 'startTime', order: 'descending' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="昵称" prop="nickname" width="120" sortable />
          <el-table-column prop="id" label="ID" width="120" sortable />
          <el-table-column prop="workAddress" label="工作地址" width="300" show-overflow-tooltip />
          <el-table-column prop="homeAddress" label="家庭地址" width="300" show-overflow-tooltip />
          <el-table-column prop="status" label="泄露位置类型" width="130" show-overflow-tooltip sortable />
          <el-table-column prop="startTime" label="任务开始时间" show-overflow-tooltip />
          <el-table-column prop="progress" label="抗定位任务进度" show-overflow-tooltip>
            <template slot-scope="scope">
              <jwd-progress :percentage="scope.row.progress"/>
            </template>
          </el-table-column>
          <el-table-column prop="details" label="抗定位后估计地点" show-overflow-tooltip />
          <el-table-column label="抗定位结果" show-overflow-tooltip>
            <template slot-scope="">
              <el-button type="text" @click="todetailspage">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
          :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]" :total="totalDataCount"
          layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px; text-align: center;">
        </el-pagination>
      </div>
    </div>
    <!-- 抗定位任务配置弹窗 -->
    <el-dialog top="300" title="导入用户配置" :visible.sync="dialogFormVisible" width="400px" center >
<!--    <el-form :model="form">-->
<!--        <el-form-item label="抗定位方式：" :label-width="formLabelWidth">-->
<!--          <el-checkbox label="社会内容混淆" />-->
<!--          <el-checkbox label="社会关系混淆" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="设置混淆后位置" :label-width="formLabelWidth">-->
<!--          <el-input v-model="input" style="width: 200px" placeholder="请输入想要混淆到的地点" />-->
<!--        </el-form-item>-->
<!--      </el-form>  -->

<!--   <el-alert title="该操作会修改用户社交内容与社交关系，请谨慎操作！" type="warning" show-icon-->
<!--        style="position: relative;left: 350px;top: -70px; width: 40%;" />-->
      <el-form label-position="left"  label-width="80px"  :model="form">
        <el-form-item label="平台名称">
        <el-input v-model="form.date2"></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="form.date2"></el-input>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button  style="background: linear-gradient( 270deg, #2DBFFD 0%, #0E5FFF 100%);" type="primary" @click="dialogFormVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import jwdProgress from "@/components/jwdProgress/index.vue";

export default {
  components: {
    jwdProgress,
  },
  data() {
    return {
      searchText: '',
      value1: '',
      dialogVisible: false,
      input: '',
      activeName: 'first',
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      totalDataCount: 0,
      tableData: [
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

    };
  },
  methods: {
    todetailspage() {
      this.$router.push("/userestimate");
    },

    handleSearch() {

      this.filteredTableData = this.tableData.filter(item => {
        return Object.keys(item).some(key =>
          String(item[key]).toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      });

      this.totalDataCount = this.filteredTableData.length;

      this.currentPage = 1;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleBatchDelete() {
      if (this.$refs.multipleTable.selection.length === 0) {
        this.$message({
          message: '请至少选择一个用户进行删除',
          type: 'warning'
        });
        return;
      }

      this.$confirm('确认删除这些用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData = this.tableData.filter(item => {
          return !this.$refs.multipleTable.selection.some(row => row.id === item.id);
        });
        this.$refs.multipleTable.clearSelection();
        this.$message({
          message: '批量删除成功',
          type: 'success'
        });
      }).catch(() => {
        this.$message({
          message: '已取消批量删除',
          type: 'info'
        });
      });
    },
  },
  created() {
    this.tableData = [{
      id: 4835168426,
      nickname: "秋天的树叶",
      workAddress: "广州市天河区广州国际金融中心25层",
      homeAddress: "广州市天河区富力盈信大厦A座1803室",
      status: "工作地址",
      startTime: "2023-04-01 10:00:00",
      progress: "80",
      details: "xxxxxxxxxxxxx",
    },

    {
      "id": 1568493518,
      "nickname": "春天的花",
      "workAddress": "成都市锦江区IFS国际金融中心2号楼20层",
      "homeAddress": "成都市锦江区时代1号1栋1单元1204室",
      "status": "工作地址",
      "startTime": "2023-04-02 11:00:00",
      "progress": "60",
      "details": "xxxxxxxxxxxxx",
    },
    {
      "id": 6789045684,
      "nickname": "夏天的阳光",
      "workAddress": "杭州市西湖区西湖国际科技大厦A座8层",
      "homeAddress": "杭州市西湖区九莲新村东区15幢2单元601室",
      "status": "家庭地址",
      "startTime": "2023-04-02 11:00:00",
      "progress": "90",
      "details": "xxxxxxxxxxxxx",
    },
    {
      "id": 2468086243,
      "nickname": "冬天的雪花",
      "workAddress": "南京市秦淮区南京国际金融中心28层",
      "homeAddress": "南京市秦淮区新街口商务中心C座1705室",
      "status": "工作地址",
      "startTime": "2023-04-02 11:00:00",
      "progress": "50",
      "details": "xxxxxxxxxxxxx",
    },
    {
      "id": 1357978453,
      "nickname": "秋天的落叶",
      "workAddress": "北京市朝阳区5号商场B座12层",
      "homeAddress": "北京市朝阳区工体北路甲2号院3号楼2单元1001室",
      "status": "家庭地址",
      "startTime": "2023-04-02 11:00:00",
      "progress": "70",
      "details": "xxxxxxxxxxxxx",
    },
    {
      "id": 8642045678,
      "nickname": "春天的花朵",
      "workAddress": "上海市浦东新区金茂大厦30层",
      "homeAddress": "上海市浦东新区东方明珠花园B栋1502室",
      "status": "家庭地址",
      "startTime": "2023-04-02 11:00:00",
      "progress": "30",
      "details": "xxxxxxxxxxxxx",
    }
    ],
      this.totalDataCount = this.tableData.length;

  },
  computed: {
    currentTableData() {
      if (!this.searchKeyword || this.filteredTableData.length === 0) {
        return this.tableData;
      }
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.filteredTableData.slice(start, end);
    },
  },
};
</script>

<style lang="scss" scoped>


.mainTable {
  padding: 15px;
  height: 85vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中对齐 */
}

.btn {
  margin-left: 60px;
  background: linear-gradient(228deg, #FFC04B 0%, #FFA216 100%);
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}

.flex-group-right {
  margin-left: 15px;
}

.rightBtn {
  margin-right: 55px;
  width: 106px;
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%);
  border-radius: 4px 4px 4px 4px;
}

.textStyle {
  margin-left: 5px;
  width: 96px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #535A6C;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-pager li.active {
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%) !important;
  color: white !important;
}
.search-icon {
  cursor: pointer;
  font-size: 18px;
  vertical-align: middle;
}
</style>
